<template>
  <div class="main-table">
    <div class="header">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <!-- <el-form-item label="姓名">
          <el-input v-model="formSearch.name" placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="search" size="small">
            <el-icon><refresh-left /></el-icon></el-button
          >
          <el-button type="success" @click="sendAdd" size="small"
            >新增</el-button
          >
          <el-button type="info" @click="sendSet" size="small"
            >操作步骤</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <Table ref="tableInfo" :searchInfo="formSearch" />
    <Dialog ref="addInfo" :type="type" :reload="search" />
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import Dialog from "./common/dialog.vue";
import Table from "./common/table.vue";
import { Search, Plus,RefreshLeft } from "@element-plus/icons";
export default {
  components: {
    Dialog,
    Table,
    Search,
    Plus,
    RefreshLeft,
  },
  setup() {
    const addInfo = ref(null);
    const tableInfo = ref(null);
    const state = reactive({
      type: "add",
      formSearch: {},
    });
    //搜索
    const search = () => {
      tableInfo.value.getData();
    };
    //添加
    const sendAdd = () => {
      state.type = "add";
      addInfo.value.open();
    };
    //个人信息
    const sendSet = () => {
      state.type = "set";
      addInfo.value.open();
    };
    return {
      addInfo,
      tableInfo,
      sendAdd,
      search,
      sendSet,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
</style>